<template>
  <div class="h-panel">
    <div class="h-panel-bar">
      <Button color="primary" @click="add">新增</Button>
      <Space :width="10" />
      <Button @click="locadData">刷新</Button>
    </div>
    <div class="h-panel-body bottom-line">
      <Table :datas="datas">
        <TableItem title="登录名称" prop="loginName" />
        <TableItem title="用户姓名" prop="userName" />
        <TableItem title="可用状态" prop="status" :render="(data)=>{return this.render(data,'status')}" />

        <TableItem title="操作" :width="200" fixed="right">
          <template #default="{ data }">
            <span class="link" @click="edit(data)">编辑</span>
            <Space :width="10" />
            <span class="link" @click="remove(data)">删除</span>
          </template>
        </TableItem>
      </Table>
    </div>
    <div class="h-panel-bar">
      <Pagination :page="page" :total="page.total" @change="locadData" />
    </div>

    <Modal v-model="editOpend" :closeOnMask="false" :hasCloseIcon="false" :hasDivider="true" :draggable="true">
      <template #header>用户管理</template>
      <Form ref="form" :model="formModel">
        <FormItem label="用户姓名" prop="userName">
          <Input type="text" v-model="formModel.userName" />
        </FormItem>
        <FormItem label="登录名称" prop="loginName">
          <Input type="text" v-model="formModel.loginName" />
        </FormItem>
        <FormItem label="登录密码" prop="loginPassword" v-if="!formModel.id">
          <Input type="password" v-model="formModel.loginPassword" />
        </FormItem>
        <FormItem label="可用状态" prop="status">
          <Select v-model="formModel.status" :datas="statusList"></Select>
        </FormItem>
      </Form>
      <template #footer>
        <Button @click="editOpend=false">关闭</Button>
        <Space :width="10" />
        <Button color="blue" @click="saveOrUpdate">确认</Button>
      </template>
    </Modal>

  </div>
</template>

<script>
  import { confirm, message } from 'heyui';
  import md5 from 'js-md5';

  export default {
    mounted () {
      this.locadData();
    },
    created () {
    },
    data () {
      return {
        page: {
          page: 1,
          size: 10,
          total: 0
        },
        statusList: [{ "label": "启用", "value": "1" }, { "label": "禁用", "value": "0" }],
        formModel: {
          status: "1",
        },
        editOpend: false,
        datas: [],
      };
    },
    methods: {
      render (data, key) {
        switch (key) {
          case "status":
            return this.statusList.find(item => item.value == data.status)?.label;
          default:
            return data[key];
        }
      },
      dataFormat (value) {
        if (value.length > 50) {
          return value.substring(0, 50) + "...";
        }
        return value;
      },
      locadData () {
        this.$post("/sysusers/page", {
          page: { current: this.page.page, size: this.page.size },
        }).then(res => {
          if (res.data == null) {
            this.page.total = 0;
            return;
          }
          if (res.data.code != this.$success && res.msg != null) {
            message.error(res.msg);
            return;
          }
          if (!!res.data.data) {
            if (res.data.data.rows != null) {
              this.datas = res.data.data.rows;
            } else {
              this.datas = [];
            }
            this.page.total = res.data.data.total;
            return;
          } else {
            this.datas = [];
            this.page.total = 0;
          }
        });
      },
      saveOrUpdate () {
        if (!!this.formModel.id) {
          this.edit()
        } else {
          this.add();
        }
      },
      add () {
        if (!this.editOpend) {
          this.formModel = {};
          this.editOpend = true;
          return;
        }
        let pwd = md5(this.formModel.loginPassword);
        this.$post("/sysusers", Object.assign({ ...this.formModel }, { loginPassword: pwd })).then(res => {
          if (res.data.code == this.$success) {
            this.editOpend = false;
            this.formModel = {};
            this.locadData();
          }
        });
      },
      edit (data) {
        if (!this.editOpend) {
          this.formModel = data;
          this.editOpend = true;
          return;
        }
        this.$put("/sysusers/edit", this.formModel).then(res => {
          if (res.data.code == this.$success) {
            this.editOpend = false;
            this.formModel = {};
            this.locadData();
          }
        });
      },
      remove (data) {
        confirm({
          content: '确定删除？',
          onConfirm: () => {
            this.$delete("/sysusers/" + data.id).then(res => {
              if (res.data.code == this.$success) {
                this.locadData();
              }
            });
          }
        });
      }
    },
  };
</script>